@import 'open-color/open-color.scss'; // Sass variables
@import '~open-color/open-color.css'; // CSS variables

// General reusable colors from our custom color palette

// Gray (blueish) palette
$white: #ffffff;
$gray-01: #f2f4f8;
$gray-02: #e4e9f1;
$gray-03: #d7ddea;
$gray-04: #cad2e2;
$gray-05: #bdc7db;
$gray-06: #afbcd4;
$gray-07: #a2b0cd;
$gray-08: #95a5c6;
$gray-09: #889abf;
$gray-10: #7a8fb8;
$gray-11: #6d84b0;
$gray-12: #6078a9;
$gray-13: #566e9f;
$gray-14: #4f6592;
$gray-15: #475c85;
$gray-16: #405377;
$gray-17: #39496a;
$gray-18: #32405d;
$gray-19: #2b3750;
$gray-20: #242e42;
$gray-21: #1d2535;
$gray-22: #151c28;
$gray-23: #0e121b;
$black: #07090d;

// Tell Bootstrap to use colors from OpenColor
$blue: $oc-blue-7;
$indigo: $oc-indigo-7;
$purple: $oc-violet-7;
$pink: $oc-pink-7;
$red: $oc-red-7;
$orange: $oc-orange-7;
$yellow: $oc-yellow-7;
$green: $oc-green-7;
$teal: $oc-teal-7;
$cyan: $oc-cyan-3;

// Globals
$primary: $blue;
$secondary: #2b3750;
$success: $green;
$info: $cyan;
$warning: $yellow;
$danger: $red;
$secondary-light: darken($gray-01, 5%);
$merged: $purple;

// Color for the <mark> element and highlighted/hovered tokens
$mark-bg-dark: rgba(217, 72, 15, 0.5);
$mark-bg-light: rgba(255, 192, 120, 0.5);

// Added to bg- and text- utilities because it is commonly needed in our app.
$theme-colors: (
    'merged': $merged,
);
$theme-colors-light: (
    'secondary': $secondary-light,
);

$body-color: var(--body-color);
$body-bg: var(--body-bg);
$text-muted: var(--text-muted);

:root {
    --primary: #{$primary};
    --secondary: #{$secondary-light};
    --success: #{$success};
    --info: #{$info};
    --warning: #{$warning};
    --danger: #{$danger};
    --merged: #{$merged};
    --color-border-active: #329af0;
    // Logo colors
    --logo-orange: #f96216;
    --logo-blue: #00b4f2;
    --logo-purple: #b200f8;
    // Additional colors
    --tooltip-bg: #{$gray-19};
    --box-shadow: 0 0.25rem 0.5rem #{rgba($gray-19, 0.07)};
    --focus-box-shadow: 0 0 0 0.125rem #{rgba($primary, 0.8)};
    // Matches Bootstrap colors, using variable to easily change for redesign
    --btn-link-disabled-color: #6c757d;
}

.theme-light {
    // Affects default browser styles
    color-scheme: light;

    --body-color: #{$gray-19};
    --body-bg: #fbfdff;
    --color-bg-1: #ffffff;
    --color-bg-2: #{$gray-01};
    --color-bg-3: #{$gray-04};
    --color-bg-4: #{$gray-02};
    --color-bg-5: #{$gray-13};
    --color-bg-6: #{$gray-13};
    --color-text-3: #{rgba($gray-17, 0.5)};
    --code-bg: #{$gray-01};
    --focus-outline-color: var(--primary);
    --mark-bg: #{$mark-bg-light};
    --text-muted: #6d727c;
    --line-number-color: #{$gray-05};
    --header-icon-color: #{$gray-13};
    --link-color: #{$gray-13};
    --link-active-color: #{$gray-18};
    --link-hover-color: #{$gray-21};
    --link-hover-bg-color: #{$gray-02};
    --link-hover-bg-color-2: #{$gray-03};
    --border-color: #{$gray-04};
    --border-color-2: #{$gray-02};
    --sourcegraph-logo-text-color: #242427;
    --search-query-text-color: #2b3750;
    --search-filter-keyword-color: #268bd2;
    --search-keyword-color: #{$oc-grape-7};
    --infobar-warning-color: #{$oc-red-8};
    --web-content-link-color: #1c7cd6;
    --disabled-action-bg-color: #{$oc-gray-3};
    --disabled-action-text-color: #{$oc-gray-5};
    --tour-bg: #ffffff;
}
.theme-dark {
    // Affects default browser styles
    color-scheme: dark;

    --secondary: #{$secondary};
    --border-color: #{$gray-19};
    --border-color-2: #1b1730;
    --body-color: #ffffff;
    --body-bg: #04070e;
    --color-bg-1: #{$gray-22};
    --color-bg-2: #{$gray-21};
    --color-bg-3: #{$gray-19};
    --color-bg-4: #{$gray-22};
    --color-bg-5: #{$gray-17};
    --color-bg-6: #{$gray-06};
    --color-text-3: #{rgba(#ffffff, 0.5)};
    --code-bg: #{$gray-21};
    --focus-outline-color: var(--primary);
    --mark-bg: #{$mark-bg-dark};
    --text-muted: #{$gray-07};
    --line-number-color: #{$gray-18};
    --header-icon-color: #{$gray-11};
    --link-color: #{$gray-07};
    --link-active-color: #{$gray-02};
    --link-hover-color: #ffffff;
    --link-hover-bg-color: #{$gray-18};
    --link-hover-bg-color-2: #{$gray-17};
    --sourcegraph-logo-text-color: #ffffff;
    --search-query-text-color: #f2f4f8;
    --search-filter-keyword-color: #569cd6;
    --search-keyword-color: #{$oc-grape-4};
    --infobar-warning-color: #{$oc-red-6};
    --web-content-link-color: #329af0;
    --disabled-action-bg-color: #{$oc-gray-8};
    --disabled-action-text-color: #{$oc-gray-9};
    --tour-bg: #{$gray-19};
}

// Load redesign styles
@import './colors-redesign';
